<template>
	<div class="recommend">
		<!--视频-->
		<section v-for="item in $store.state.newList" v-if="video=='video'">
			<div class="video_list">
				<div class="video_img">
					<div class="img_large">
					<img src="../../assets/tupia.png" class="lazyImg"/>
					<img v-lazy="item.large_image_url" class="indexImg"/>
					</div>
					<div class="video_mask">
						<h3>{{item.title}}</h3>
					</div>
					<span class="video_btn"></span>
				</div>
				<div class="video_info">
					<ul>
						<li :class="{label:item.label==='置顶',ad_label:item.label==='广告'}">{{item.label}}</li>
						<li class="source">{{item.source}}</li>
						<li class="comment">评论  {{item.comment_count}}</li>
						<li class="time">23分钟前</li>
					</ul>
				</div>
			</div>
		</section>
		<!--置顶类型-->
<section  v-else-if="item.image_list.length===0&&!item.has_image">
			<div class="item_detail">
					<h3 class="item_title">
						{{item.title}}
					</h3>
					<div class="item_info">
						<ul>
							<li :class="{label:item.label==='置顶',ad_label:item.label==='广告'}">{{item.label}}</li>
							<li class="source">{{item.source}}</li>
							<li class="comment">评论  {{item.comment_count}}</li>
							<li class="time">2小时前</li>
						</ul>
					</div>
				</div>
		</section>
		<!--三图-->
<section v-else-if="item.image_list.length===3">
			<div class="item_detail">
				<h3 class="item_title">
					{{item.title}}
				</h3>
				<div class="item_pic">
					<ul>
						<li v-for="item2 in item.image_list"><img :src="item2.url" alt="" /></li>
					</ul>
				</div>
				<div class="item_info">
					<ul>
						<li :class="{label:item.label==='置顶',ad_label:item.label==='广告'}">{{item.label}}</li>
						<li class="source">{{item.source}}</li>
						<li class="comment">评论  {{item.comment_count}}</li>
					</ul>
				</div>
				
			</div>
		</section>
		
		<!--单图类型-->
		<section v-else-if="item.image_list.length===0&&item.has_image
">
			<div class="item_detail pd wth">
				<h3 class="item_title">
					{{item.title}}
				</h3>
				<div class="item_info">
					<ul>
						<li :class="{label:item.label==='置顶',ad_label:item.label==='广告'}">{{item.label}}</li>
						<li class="source">{{item.source}}</li>
						<li class="comment">评论  {{item.comment_count}}</li>
					</ul>
				</div>
				
			</div>
			<div class="item_img">
				<img :src="item.image_url"/>
			</div>
		</section>
	
	<!--广告有图-->
	<!--<section v-else-if="item.has_image===false&&item.label===`广告`">
			<div class="item_detail">
				<h3 class="item_title">
					开放的大门不会关上
				</h3>
				<div class="item_info">
					<ul>
						<li :class="{label:item.label==='置顶',ad_label:item.label==='广告'}">{{item.label}}</li> 
						<li class="source">央视网新闻</li>
						<li class="comment">评论  375</li>
						<li class="time">2小时前</li>
					</ul>
				</div>
			</div>
		</section>-->
		
		<p>loading........</p>
	</div>
</template>

<script>
	import axois from 'axios';
	let doc = "";
	let dis = 0;
	let isAdd = true;
	let timer;
	export default{
//		created(){
//			this._initCotent();
//		},
		mounted(){
			this.addList()
//			console.log(this.$route.query.name=="video")
		},	
		data(){
			return {
				newList:[],
				scroll: '',
//				showList:[],
				contentList:[],
			}
		},
		computed:{
			video:function(){
					return this.$route.query.name
				}
		},
		methods:{
			_getRec(){
				var c_url = this.$route.query.name;
				this.$store.commit('first_init',{
					url:c_url
				})
//				axois({
//					methods:'get',
//					url:this.$route.query.name,
//					params:{
//						rid:1
//					}
//				}).then((res)=>{
//					this.newList = res.data.data;
//				})
			},
			addList(){
//				var s_url = this.$route.query.name;
//							var n = 2
//							this.$store.commit('_init',{
//								url:s_url,
//								num: n
//							})
				let _this = this;
//				if(!this.$store.state.newList.length){
					window.addEventListener("scroll",()=>{
						if(timer)
						clearTimeout(timer)
//						isAdd = false;
						//console.log(isAdd)
						var num = this.$store.state.count+1
						doc = document.documentElement||document.body;
						dis = ((doc.offsetHeight-doc.scrollTop)/doc.offsetHeight)*10|0
						//console.log(dis)
						timer = setTimeout(function(){
						if(dis<=6&&num<=3){
							console.log(num)
							var s_url = _this.$route.query.name;
							_this.$store.commit('add')	
							_this.$store.commit('_init',{
								url:s_url,
								n:num
							})
						}
						},600)
					})
//				}
					
					
//					if(!this.newList.length){
//						window.addEventListener("scroll",(e)=>{
//							if(!isAdd){return}
//							isAdd = false;
//							setTimeout(()=>{
//								doc = document.documentElement||document.body;
////							1.总高度
////							console.log("总高度",doc.offsetHeight)
////							2.当前高度
////							console.log("当前高度",doc.scrollTop)
//							isAdd = true;
//							dis = ((doc.offsetHeight-doc.scrollTop)/doc.offsetHeight)*10|0
////							console.log("dis",dis)
//							if(dis<=6&&this.contentList.length){
//								this._ShowList()
//							}
//							},600)
//						})
//				}
//			},
//			_ShowList(){
//						let con = this.contentList.splice(0,listNum)
//						this.newList = this.newList.concat(con)
//			},
//			_initCotent(){
////				var url ="/message?rid=2"
////				var l_url = this.$route.query.name;
////				this.$store.commit('_init',{
////					url:l_url
////				})
//				axois({
//					method:'get',
//					url:this.$route.query.name,
//					params:{
//						rid:2
//					}
//				}).then((res)=>{
////					console.log(res)
//					this.contentList = res.data.data
//				}).then(()=>{this._ShowList()})
//				
			}
		  }
	}
</script>

<style lang="scss">
	.recommend{
		padding: 0 4.5%;
		padding-top: 84px;
		p{
			padding: 10px 0;
			text-align: center;
			font-size: 24px;
			color: #A5A5A5;
		}
	}
</style>